<template>
  <el-card class="box-card">
    <el-form :inline="true" :model="form">
      <el-form-item label="菜单名称">
        <el-input v-model="form.name" placeholder="请输入菜单名称" />
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="success" v-if="$formatFR(menuManage.add)" @click="addOrUpdateHandle(false)"
          >新增</el-button
        >
        <el-button type="primary" @click="getList">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="menuList"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildrens' }"
    >
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column
        prop="name"
        label="菜单名称"
        :show-overflow-tooltip="true"
        width="180"
      ></el-table-column>
      <el-table-column prop="icon" label="图标" align="center" width="100">
        <template slot-scope="scope">
          <i :class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="orderNo" label="排序" align="center" width="60"></el-table-column>
      <el-table-column prop="hidden" label="隐藏" width="80" align="center">
        <template slot-scope="scope">
          <el-tag type="info" size="mini" v-if="scope.row.hidden === 'N'">否</el-tag>
          <el-tag type="primary" size="mini" v-if="scope.row.hidden === 'Y'">是</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="path"
        label="组件路径"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="type" label="类型" width="80" align="center">
        <template slot-scope="scope">
          <el-tag type="primary" size="mini" v-if="scope.row.type === 'M'">菜单</el-tag>
          <el-tag type="info" size="mini" v-if="scope.row.type === 'B'">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="keepAlive" label="缓冲" width="80" align="center">
        <template slot-scope="scope" v-if="scope.row.type === 'M'">
          <el-tag type="info" size="mini" v-if="scope.row.keepAlive === 'N'">关闭</el-tag>
          <el-tag type="primary" size="mini" v-if="scope.row.keepAlive === 'Y'">开启</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="permission"
        label="权限标识"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-link
            type="success"
            size="mini"
            v-if="$formatFR(menuManage.add)"
            plain
            :style="{ marginRight: '10px' }"
            @click="addOrUpdateHandle(false, scope.row)"
            >添加
          </el-link>
          <el-link
            type="warning"
            size="mini"
            v-if="$formatFR(menuManage.edit)"
            plain
            :style="{ marginRight: '10px' }"
            @click="addOrUpdateHandle(true, scope.row)"
            >修改
          </el-link>
          <el-link
            type="danger"
            size="mini"
            v-if="$formatFR(menuManage.add)"
            plain
            @click="handleDelete(scope)"
            >删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <AddEditDialog
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getList"
    ></AddEditDialog>
  </el-card>
</template>

<script>
import { del, menuList } from "@/api/system/menu"
import AddEditDialog from "./components/AddEditDialog.vue"
import { mapGetters } from "vuex"

import FUNCROLELIST from "@/utils/func_role/system"

export default {
  name: "menuManage",
  components: { AddEditDialog },
  data() {
    return {
      menuManage: FUNCROLELIST.menu,
      form: {
        name: ""
      },
      addOrUpdateVisible: false,
      // 菜单表格树数据
      menuList: [],
      // 菜单树选项
      menuOptions: []
    }
  },
  created() {
    this.getList()
  },
  computed: {
    ...mapGetters(["permissions"])
  },
  methods: {
    reset() {
      this.form = {
        name: ""
      }
      this.getList()
    },
    addOrUpdateHandle(isEdit, row) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(isEdit, row)
      })
    },
    getList() {
      menuList(this.form).then((response) => {
        this.menuList = response.data
      })
    },
    handleDelete(row) {
      this.$confirm('是否确认删除名称为"' + row.row.name + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        del(row.row.id).then(() => {
          this.getList()
          this.$message({
            type: "success",
            message: "删除成功"
          })
        })
      })
    }
  }
}
</script>
